<template>
  <div class="header_box">
    <div>活动名称：{{ resData.activity_name }}</div>
    <div>创建人：{{ resData.created_user }}</div>
    <div>创建时间：{{ resData.created_at }}</div>
    <div v-if="resData.period_type == 1">有效期：永久</div>
    <div v-else>
      创建有效期：{{ resData.activity_time[0] }} 至
      {{ resData.activity_time[1] }}
    </div>
    <div>
      状态：<span :style="{ color: StatusColor(resData.activity_status) }">
        {{ resData.status_name }}
      </span>
    </div>
    <div v-if="resData.real_end_date">提前结束时间：{{ resData.real_end_date }}</div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { getBasisInfo } from '@/api/smartMarketing/order'
  import { StatusColor } from '@/utils/smartMarketing'
  import { useRoute } from 'vue-router'
  const route = useRoute()

  const resData = ref({
    activity_name: '',
    created_user: '',
    created_at: '',
    activity_status: 0,
    status_name: '',
    real_end_date: '',
    activity_time: ['', ''],
    period_type: 1
  })
  const getInfo = async () => {
    const res = await getBasisInfo({ activity_id: route.query.id })
    resData.value = res
  }
  onMounted(() => {
    getInfo()
  })
</script>
<style lang="scss" scoped>
  .header_box {
    display: flex;
    justify-content: space-between;
    padding: 20px 26px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    font-size: 14px;
    color: #33302d;
  }
</style>
